Optimize createElement #27271
Optimize createElement #27271
Conversation
|
any updates on this? |
|
See: reactjs/rfcs#107 |
|
thank you |
|
Wow! This is a big improvement. It is hard to know how this will translate to a real app since the engine performance characteristics will be different for this case with only a few component types and props shapes vs a real app with many types of components and many shapes of props. But hopefully we can ship all the changes in reactjs/rfcs#107 which would have even a bigger impact than this. |
|
This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated. |
github-actions
bot
added
the
Resolution: Stale
|
this still looks like something worth merging, so "bump" from my side. |
github-actions
bot
removed
the
Resolution: Stale
|
actually, looks like this could be closed because of #28768 |
|
@zackasaurus Thanks for sending this in! This helped kick-start the work to get #28768 and friends landed for real. Hopefully you will see even larger gains from that set of changes once they’re released (note they’re still behind a feature flag on main for now). |
Summary
I created this PR in response to the #27216 issue I opened.
How did you test this change?
I created a sandbox which renders a large React DOM tree with a configurable number of elements and props. These are broken up by LIST, DEPTH, and PROPS. I used the settings LIST = 500, DEPTH = 20, PROPS = 30 to emulate a complex react app and saw a 30-40% reduction in script.
For benchmarking, I used the production version of both the current 18.2.0
createElementand the production-built custom version of the modifiedcreateElementas seen in the PR.Sandbox link:
https://codesandbox.io/s/react-create-element-performance-comparison-tpp5cl?file=/src/App.js
What the UI looks like:
What the F12 Performance Trace looks like: